import React from "react";
import { nanoid } from "nanoid";

import TodoHeader from "./components/TodoHeader";
import TodoItem from "./components/TodoItem";
import TodoOpt from "./components/TodoOpt";

interface AppState {
  todos: ITodoItem[];
}

class App extends React.Component<any, AppState> {
  state: Readonly<AppState> = {
    todos: [
      { id: nanoid(), text: "吃饭", isOk: true },
      { id: nanoid(), text: "睡觉", isOk: false },
    ],
  };

  handleEnter = (value: string) => {
    console.log("onEnter", value);

    // 增加一个 todo 到 todos 中
    const newTodo: ITodoItem = { id: nanoid(), text: value, isOk: false };
    // this.setState({ todos: [...this.state.todos, newTodo] });    // OK
    this.setState(({ todos }) => ({ todos: [...todos, newTodo] })); // OK
    // this.state.todos.push(newTodo); // !OK
    // this.setState({ todos: this.state.todos });
  };

  handleDelete = (id: string) => {
    console.log("handleDelete", id);

    this.setState((state) => {
      return {
        todos: state.todos.filter((item) => item.id !== id),
      };
    });
  };

  handleUpdate = (newTodo: ITodoItem) => {
    // 修改数组中某一项

    this.setState((state) => {
      return {
        todos: state.todos.map((item) => {
          if (item.id === newTodo.id) {
            return newTodo;
          } else {
            return item;
          }
        }),
      };
    });

    // 深拷贝
    // const newTodos = JSON.parse(JSON.stringify(this.state.todos))
  };

  render(): React.ReactNode {
    // 解构
    const { todos } = this.state;

    return (
      <div>
        <TodoHeader onEnter={this.handleEnter} />

        {todos.map((todo) => (
          <TodoItem
            key={todo.id}
            {...todo}
            onDelete={this.handleDelete}
            onUpdate={this.handleUpdate}
          />
        ))}

        <TodoOpt />
      </div>
    );
  }
}

export default App;
